<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>allinone thumbnails演示(simple皮肤/固定尺寸)_素材火</title>

<link rel="stylesheet" href="css/allinone_thumbnailsBanner.css">
<script src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script src="js/jquery-ui-1.10.2.min.js"></script>
<script src="js/allinone_thumbnailsBanner.js"></script>
<script src="js/reflection.js" type="text/javascript"></script>

<script>
$(function() {
	$('#allinone_thumbnailsBanner_simple').allinone_thumbnailsBanner({
		skin: 'simple',
		numberOfThumbsPerScreen:7,
		width: 960,
		height: 384,
		thumbsReflection:0,
		defaultEffect: 'random'
	});
});
</script>
</head>

<body>
<h1>allinone thumbnails演示(simple皮肤/固定尺寸)</h1>

<!-- 代码开始 -->
<div style="width:960px; height:400px; margin:50px auto 0 auto;">
	<div id="allinone_thumbnailsBanner_simple" style="display:none;">
		<ul class="allinone_thumbnailsBanner_list">
			<!-- 图片 -->
			<li data-bottom-thumb="images/simple/thumbs/01_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/simple/01_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/02_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/simple/02_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/03_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/simple/03_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/04_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText4"><img src="images/simple/04_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/05_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText5"><img src="images/simple/05_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/01_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/simple/01_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/02_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/simple/02_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/03_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/simple/03_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/04_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText4"><img src="images/simple/04_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/05_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText5"><img src="images/simple/05_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/01_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/simple/01_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/02_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/simple/02_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/03_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/simple/03_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/04_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText4"><img src="images/simple/04_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/05_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText5"><img src="images/simple/05_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/01_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText1"><img src="images/simple/01_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/02_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/simple/02_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/03_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText3"><img src="images/simple/03_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/04_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText4"><img src="images/simple/04_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/05_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText5"><img src="images/simple/05_simple.jpg" alt="" /></li>
			<li data-bottom-thumb="images/simple/thumbs/02_simple.jpg" data-text-id="#allinone_thumbnailsBanner_photoText2"><img src="images/simple/02_simple.jpg" alt="" /></li>
		</ul>
		
		<!-- 文字 -->
		<div id="allinone_thumbnailsBanner_photoText1" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement11_simple" data-initial-left="0" data-initial-top="60" data-final-left="0" data-final-top="307" data-duration="0.5" data-fade-start="0" data-delay="0">&nbsp;&nbsp;&nbsp;UP TO <a href="http://www.sucaihuo.com/js/249.html" target="_blank">4 TYPES</a> OF SLIDERS<br />
				&nbsp;&nbsp;&nbsp;Each with multiple SKINS</div>
		</div>
		<div id="allinone_thumbnailsBanner_photoText2" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement21_simple" data-initial-left="200" data-initial-top="60" data-final-left="45" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0"><span style="font-weight:bold;">16 TRANSITION EFFECTS<br />
				FOR IMAGES</span><br />
				optional can set the transition<br />
				for each image</div>
		</div>
		<div id="allinone_thumbnailsBanner_photoText3" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement31_simple" data-initial-left="70" data-initial-top="160" data-final-left="70" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0"><span>Animated text from any direction</span><br />
				<span style="text-transform:uppercase; font-weight:bold;">top, bottom, left<br />
				and right</span><br />
				Any color, CSS and HTML formated</div>
		</div>
		<div id="allinone_thumbnailsBanner_photoText4" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement41_simple" data-initial-left="100" data-initial-top="60" data-final-left="480" data-final-top="60" data-duration="0.5" data-fade-start="0" data-delay="0"><span style="text-transform:uppercase; font-weight:bold;">16 transition effects<br />
				for images</span><br />
				optional can set the transition<br />
				for each image</div>
		</div>
		<div id="allinone_thumbnailsBanner_photoText5" class="allinone_thumbnailsBanner_texts">
			<div class="allinone_thumbnailsBanner_text_line textElement51_simple" data-initial-left="0" data-initial-top="200" data-final-left="0" data-final-top="0" data-duration="0.5" data-fade-start="0" data-delay="0"><span style="font-weight:bold; text-transform:uppercase;">Up to 4 types of <a href="http://www.sucaihuo.com/js/249.html" target="_blank">sliders</a></span><br />
				Each with multiple skins</div>
		</div>
	</div>
</div>
<!-- 代码结束 -->









<!-- 以下是统计和广告，与演示无关，不必理会 -->
<style type="text/css">
body { margin: 0;}
h1 { margin: 40px 10px; font: 32px Microsoft Yahei; text-align: center;}

.vad { margin:120px 0 5px; font-family: arial,宋体,sans-serif; text-align:center;}
.vad a { display:inline-block; height: 30px; line-height: 30px; margin:0 5px; padding:0 20px; font-size:14px; text-align:center; color:#eee; text-decoration:none; background-color:#222;}
.vad a:hover { color:#fff; background-color:#000;}

.a728x90 { width: 728px; height: 90px; margin: 0 auto;}
</style>

<p class="vad"><a href="http://www.sucaihuo.com/" target="_blank">sucaihuo.com</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">说 明</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">下 载</a></p>

<div class="a728x90"><!--#include file="/inc/ggad728x90.inc"--></div>

</body>
</html>